import { Component, OnInit } from '@angular/core';
import { ThreeLibsService } from 'src/app/core/service/three-libs.service';

@Component({
  selector: 'app-resource-location',
  templateUrl: './resource-location.component.html',
  styleUrls: ['./resource-location.component.scss']
})

export class ResourceLocationComponent implements OnInit {
  isConfirmLoading = false;
  isVisible = false;
  pageSize = 10;      // 每页展示多少数据 —— 10条
  pageIndex = 1;      // 页码标识
  sortValue = null;   // 种类值
  sortKey = null;     // 种类关键值
  loading = true;     // 加载
  total = 1;          // 总共1页
  dataSet = [];       // 数据集合
  displayData = [];
  allChecked = false;
  indeterminate = false;
  radioValue = 'A';
  filterGender = [
    { text: 'male', value: 'male' },
    { text: 'female', value: 'female' }
  ];
  searchGenderList: string[] = [];

  gaugeOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // name: '水量',
        min: 0,
        max: 200,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        // name: '温度',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: '蒸发量',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '降水量',
        type: 'bar',
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
      },
      {
        name: '平均温度',
        type: 'line',
        yAxisIndex: 1,
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };

  constructor(private threelibsservice: ThreeLibsService) { }

  /**
   * 在中间显示
   */
  showModal(): void {
    this.isVisible = true;
    this.searchData();
  }
  /**
   * 触发 OK 事件
   */
  handleOk(): void {
    this.isConfirmLoading = true;
    setTimeout(() => {
      this.isVisible = false;
      this.isConfirmLoading = false;
    }, 3000);
    // 加载表格中的数据
    this.searchData();
  }
  /**
   * 触发 取消事件
   */
  handleCancel(): void {
    this.isVisible = false;
  }

  /**
   * 搜索数据
   * @param reset 重置
   */
  searchData(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }
    this.loading = true;
    this.threelibsservice.getUsers(this.pageIndex, this.pageSize, this.sortKey, this.sortValue,
      this.searchGenderList).subscribe((data: any) => {
        this.loading = false;
        this.total = 200;
        this.dataSet = data.results;
      });
  }

  sort(sort: { key: string, value: string }): void {
    this.sortKey = sort.key;
    this.sortValue = sort.value;
    this.searchData();
  }

  updateFilter(value: string[]): void {
    this.searchGenderList = value;
    this.searchData(true);
  }

  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
    this.displayData = $event;
    this.refreshStatus();
  }


  /**
   * 刷新状态
   */
  refreshStatus(): void {
    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  /**
   * 全选方法
   */
  checkAll(value: boolean): void {
    this.displayData.forEach(data => {
      if (!data.disabled) {
        data.checked = value;
      }
    });
    // 刷新状态
    this.refreshStatus();
  }

  ngOnInit() {
    console.log('说执行就执行');
    this.showModal();
  }

}
